<template>
  <div class="record">
    <gltitle
      :titleSize="titleSize"
      :is_mt="is_mt"
      v-if="!$store.state.isApp"
    ></gltitle>

    <van-list
      v-model="loading"
      :finished="finished"
      :loading-text="$t('load.loading')"
      @load="onLoad"
      class="recordlist"
      :style="{ paddingTop: !$store.state.isApp ? '1.18rem' : '.2rem' }"
    >
      <van-cell v-for="item in list" :key="item.id">
        <div class="record-item">
          <div class="db">
            <div class="cid" v-if="item.ranking == 1">
              <img src="../../assets/images/dj1.png" alt="" />
            </div>
            <div class="cid" v-else-if="item.ranking == 2">
              <img src="../../assets/images/dj2.png" alt="" />
            </div>
            <div class="cid" v-else-if="item.ranking == 3">
              <img src="../../assets/images/dj3.png" alt="" />
            </div>
            <div class="cid" v-else>{{ item.ranking }}</div>
            <div class="photo"><img :src="item.avatar" alt="" /></div>
            <div class="flex">{{ item.userName }}</div>
            <div class="str tar" v-html="$t('bargain.infomessage', { n1: item.amount })">
            </div>
          </div>
        </div>
      </van-cell>
      <div class="nulldata" v-if="showNull">
        <img src="../../assets/images/none2.png" alt="" />
        <p>{{$t('toast.nullkj')}}</p>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleSize: this.$t("title.bargainrecord"),
      is_mt: true,
      list: [],
      loading: false,
      finished: false,
      page: 1,
      totals: 0,
      showNull: false,
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        //记录
        this.$post(this.URL.bargain.toprecord, {
          pageSize: 10,
          index: this.page,
          bargainCode: this.bargainCode,
        }).then((res) => {
          if (res.code == 0) {
            const { page, list } = res.data;
            this.totals = page.count;
            if (this.page == 1 && list == "") {
              this.showNull = true;
            }
            if (this.page == 1) {
              this.list = list;
            } else {
              this.list = this.list.concat(list);
            }

            this.page++;
            this.loading = false;
            if (this.list.length >= this.totals) {
              this.finished = true;
            }
          } else {
            this.$toast(res.message);
          }
        });
      }, 1000);
    },
  },
};
</script>

<style lang="less" scoped>
.record {
  .recordlist {
    padding: 0 0.2rem;
    .nulldata {
      font-size: 0.28rem;
      color: #bbbbbb;
      text-align: center;
      img {
        width: 3.29rem;
        margin: 4.02rem 0 0.39rem;
      }
    }
    .record-item {
      border-radius: 0.16rem;
      .db {
        padding: 0.28rem 0;
        font-size: 0.24rem;
        color: #000;
        img {
          vertical-align: middle;
        }
        .cid {
          width: 0.3rem;

          text-align: center;
          img {
            height: .4rem;
          }
        }
        .photo {
          padding: 0 0.2rem;
          img {
            width: .48rem;
            height: 0.48rem;
            border-radius: .48rem;
            object-fit: cover;
          }
        }
        span {
          color: #f22d1e;
          font-size: 0.36rem;
          margin: 0 0.06rem;
        }
      }
      .nullrecord {
        padding: 0.5rem 0;
        text-align: center;
      }
    }
  }
}
</style>
